<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel height="150px">
      <!-- 里面的item表示轮播图的每一页 -->
      <el-carousel-item v-for="item in 5" :key="item">
        <img src="../assets/logo.png" />
      </el-carousel-item>
    </el-carousel>

    <!-- 筛选菜单 -->
    <FilterMenu />

    <!-- 商品列表 -->
    <div style="display:flex; flex-wrap:wrap">
      <ProductItem v-for="(item,index) in productList" :productData="item" :key="index" />
    </div>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="30" @current-change="changePage" />
  </div>
</template>

<script>
import ProductItem from "./ProductItem";
import FilterMenu from "./FilterMenu";
export default {
  data() {
    return {
      productList: [] // 商品列表
    };
  },
  components: {
    ProductItem,
    FilterMenu
  },
  created() {
    // 请求获取商品列表
    this.axios.get("/v1/home/phoneList").then(res => {
      console.log(res);
      this.productList = res.data;
    });
  },
  methods: {
    // 切换页码的回调方法
    changePage(page) {
      // 请求获取商品列表
      this.axios.get("/v1/home/phoneList?page=" + page).then(res => {
        console.log(res);
        this.productList = res.data;
      });
    }
  }
};
</script>

<style>
</style>